<template>
  <page-container>
    <el-row :gutter="20">
      <el-col
        v-for="info in headerInfos"
        :key="info"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="6"
      >
        <InfoCard
          :info="info"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <OrderTend />
      </el-col>
    </el-row>
    <UserTend />
  </page-container>
</template>

<script lang="ts" setup>
import { getHeaderInfo } from '@/api/home'
import type { IHeaderInfo } from '@/api/types/home'
import { ref, onMounted } from 'vue'
import InfoCard from './InfoCard.vue'
import OrderTend from './OrderTend.vue'
import UserTend from './UserTend.vue'

const headerInfos = ref<IHeaderInfo[]>([])

const loadInfo = async () => {
  const { info } = await getHeaderInfo()
  if (info) {
    headerInfos.value = info
  }
}
onMounted(() => {
  loadInfo()
})
</script>

<style lang="scss" scoped>
</style>
